#content-container
  .advanced-wrapper
    .toolbar.toolbar-container(ng-if='$ctrl.toolbar', ng-show='$ctrl.toolbarCreated && $ctrl.showToolbar')
      span.ql-format-group(ng-if="$ctrl.shouldShow(['font', 'size'])")
        select.ql-font(title='{{$ctrl.dict.font}}', ng-if="$ctrl.shouldShow(['font'])")
          option(ng-repeat='option in $ctrl.fontfamilyOptions', value='{{option.alias}}') {{option.label}}
        select.ql-size(title='{{$ctrl.dict.size}}', ng-if="$ctrl.shouldShow(['size'])")
          option(ng-repeat='option in $ctrl.fontsizeOptions', ng-selected='$index === 1', value='{{option.size}}') {{$ctrl.dict[option.alias] || option.alias}}
      span.ql-format-group(ng-if="$ctrl.shouldShow(['bold', 'italic', 'underline', 'strike'])")
        span.ql-format-button.ql-bold(title='{{$ctrl.dict.bold}}', ng-if="$ctrl.shouldShow(['bold'])")
        span.ql-format-button.ql-italic(title='{{$ctrl.dict.italic}}', ng-if="$ctrl.shouldShow(['italic'])")
        span.ql-format-button.ql-underline(title='{{$ctrl.dict.underline}}', ng-if="$ctrl.shouldShow(['underline'])")
        span.ql-format-button.ql-strike(title='{{$ctrl.dict.strike}}', ng-if="$ctrl.shouldShow(['strike'])")
      span.ql-format-group(ng-if="$ctrl.shouldShow(['color', 'background'])")
        select.ql-color(title='{{$ctrl.dict.textColor}}', ng-if="$ctrl.shouldShow(['color'])")
          option(value='rgb(0, 0, 0)', label='rgb(0, 0, 0)', selected='')
          option(value='rgb(230, 0, 0)', label='rgb(230, 0, 0)')
          option(value='rgb(255, 153, 0)', label='rgb(255, 153, 0)')
          option(value='rgb(255, 255, 0)', label='rgb(255, 255, 0)')
          option(value='rgb(0, 138, 0)', label='rgb(0, 138, 0)')
          option(value='rgb(0, 102, 204)', label='rgb(0, 102, 204)')
          option(value='rgb(153, 51, 255)', label='rgb(153, 51, 255)')
          option(value='rgb(255, 255, 255)', label='rgb(255, 255, 255)')
          option(value='rgb(250, 204, 204)', label='rgb(250, 204, 204)')
          option(value='rgb(255, 235, 204)', label='rgb(255, 235, 204)')
          option(value='rgb(255, 255, 204)', label='rgb(255, 255, 204)')
          option(value='rgb(204, 232, 204)', label='rgb(204, 232, 204)')
          option(value='rgb(204, 224, 245)', label='rgb(204, 224, 245)')
          option(value='rgb(235, 214, 255)', label='rgb(235, 214, 255)')
          option(value='rgb(187, 187, 187)', label='rgb(187, 187, 187)')
          option(value='rgb(240, 102, 102)', label='rgb(240, 102, 102)')
          option(value='rgb(255, 194, 102)', label='rgb(255, 194, 102)')
          option(value='rgb(255, 255, 102)', label='rgb(255, 255, 102)')
          option(value='rgb(102, 185, 102)', label='rgb(102, 185, 102)')
          option(value='rgb(102, 163, 224)', label='rgb(102, 163, 224)')
          option(value='rgb(194, 133, 255)', label='rgb(194, 133, 255)')
          option(value='rgb(136, 136, 136)', label='rgb(136, 136, 136)')
          option(value='rgb(161, 0, 0)', label='rgb(161, 0, 0)')
          option(value='rgb(178, 107, 0)', label='rgb(178, 107, 0)')
          option(value='rgb(178, 178, 0)', label='rgb(178, 178, 0)')
          option(value='rgb(0, 97, 0)', label='rgb(0, 97, 0)')
          option(value='rgb(0, 71, 178)', label='rgb(0, 71, 178)')
          option(value='rgb(107, 36, 178)', label='rgb(107, 36, 178)')
          option(value='rgb(68, 68, 68)', label='rgb(68, 68, 68)')
          option(value='rgb(92, 0, 0)', label='rgb(92, 0, 0)')
          option(value='rgb(102, 61, 0)', label='rgb(102, 61, 0)')
          option(value='rgb(102, 102, 0)', label='rgb(102, 102, 0)')
          option(value='rgb(0, 55, 0)', label='rgb(0, 55, 0)')
          option(value='rgb(0, 41, 102)', label='rgb(0, 41, 102)')
          option(value='rgb(61, 20, 102)', label='rgb(61, 20, 102)')
        select.ql-background(title='{{$ctrl.dict.backgroundColor}}', ng-if="$ctrl.shouldShow(['background'])")
          option(value='rgb(0, 0, 0)', label='rgb(0, 0, 0)')
          option(value='rgb(230, 0, 0)', label='rgb(230, 0, 0)')
          option(value='rgb(255, 153, 0)', label='rgb(255, 153, 0)')
          option(value='rgb(255, 255, 0)', label='rgb(255, 255, 0)')
          option(value='rgb(0, 138, 0)', label='rgb(0, 138, 0)')
          option(value='rgb(0, 102, 204)', label='rgb(0, 102, 204)')
          option(value='rgb(153, 51, 255)', label='rgb(153, 51, 255)')
          option(value='rgb(255, 255, 255)', label='rgb(255, 255, 255)', selected='')
          option(value='rgb(250, 204, 204)', label='rgb(250, 204, 204)')
          option(value='rgb(255, 235, 204)', label='rgb(255, 235, 204)')
          option(value='rgb(255, 255, 204)', label='rgb(255, 255, 204)')
          option(value='rgb(204, 232, 204)', label='rgb(204, 232, 204)')
          option(value='rgb(204, 224, 245)', label='rgb(204, 224, 245)')
          option(value='rgb(235, 214, 255)', label='rgb(235, 214, 255)')
          option(value='rgb(187, 187, 187)', label='rgb(187, 187, 187)')
          option(value='rgb(240, 102, 102)', label='rgb(240, 102, 102)')
          option(value='rgb(255, 194, 102)', label='rgb(255, 194, 102)')
          option(value='rgb(255, 255, 102)', label='rgb(255, 255, 102)')
          option(value='rgb(102, 185, 102)', label='rgb(102, 185, 102)')
          option(value='rgb(102, 163, 224)', label='rgb(102, 163, 224)')
          option(value='rgb(194, 133, 255)', label='rgb(194, 133, 255)')
          option(value='rgb(136, 136, 136)', label='rgb(136, 136, 136)')
          option(value='rgb(161, 0, 0)', label='rgb(161, 0, 0)')
          option(value='rgb(178, 107, 0)', label='rgb(178, 107, 0)')
          option(value='rgb(178, 178, 0)', label='rgb(178, 178, 0)')
          option(value='rgb(0, 97, 0)', label='rgb(0, 97, 0)')
          option(value='rgb(0, 71, 178)', label='rgb(0, 71, 178)')
          option(value='rgb(107, 36, 178)', label='rgb(107, 36, 178)')
          option(value='rgb(68, 68, 68)', label='rgb(68, 68, 68)')
          option(value='rgb(92, 0, 0)', label='rgb(92, 0, 0)')
          option(value='rgb(102, 61, 0)', label='rgb(102, 61, 0)')
          option(value='rgb(102, 102, 0)', label='rgb(102, 102, 0)')
          option(value='rgb(0, 55, 0)', label='rgb(0, 55, 0)')
          option(value='rgb(0, 41, 102)', label='rgb(0, 41, 102)')
          option(value='rgb(61, 20, 102)', label='rgb(61, 20, 102)')
      span.ql-format-group(ng-if="$ctrl.shouldShow(['list', 'bullet'])")
        span.ql-format-button.ql-list(title='{{$ctrl.dict.list}}', ng-if="$ctrl.shouldShow(['list'])")
        span.ql-format-button.ql-bullet(title='{{$ctrl.dict.bullet}}', ng-if="$ctrl.shouldShow(['bullet'])")
      span.ql-format-group(ng-if="$ctrl.shouldShow(['align'])")
        select.ql-align(title='{{$ctrl.dict.textAlign}}')
          option(value='left', label='{{$ctrl.dict.left}}', selected='')
          option(value='center', label='{{$ctrl.dict.center}}')
          option(value='right', label='{{$ctrl.dict.right}}')
          option(value='justify', label='{{$ctrl.dict.justify}}')
      span.ql-format-group(ng-if="$ctrl.shouldShow(['link', 'image'])")
        span.ql-format-button.ql-link(title='{{$ctrl.dict.link}}', ng-if="$ctrl.shouldShow(['link'])")
        #ql-upload-container.inline-block
          span.ql-format-button.ql-image#ql-upload-btn(title='{{$ctrl.dict.image}}', ng-if="$ctrl.shouldShow(['image'])")
    .editor-container
    input(type='text', ng-model='$ctrl.modelLength', ng-if='$ctrl.required', ng-hide='true', ng-pattern='/^([2-9]|[1-9][0-9]+)$/')
